<script lang="ts" setup>
import { useOrderDetail } from '@/hooks'

const props = defineProps<{
  orderId: string
}>()

// 获取订单详情
const { orderDetail } = useOrderDetail(props.orderId)

// 查看订单
const handleViewOrder = () => {
  if (orderDetail.value?.id) {
    uni.navigateTo({
      url: `/subpkg_medicine/pages/order_detail/order_detail?id=${orderDetail.value.id}`,
    })
  }
}

// 返回诊室
const handleBackRoom = () => {
  if (orderDetail.value?.roomId) {
    uni.navigateTo({
       url: `/subpkg_medicine/pages/order_detail/order_detail?orderId=${orderDetail.value.id}`,
    })
  }
}
</script>

<template>
  <view class="pay-result">
    <view class="success">
      <view class="icon">
        <uni-icons type="checkbox-filled" size="50" color="#16C2A3" />
      </view>
      <view class="price">¥{{ orderDetail?.actualPayment?.toFixed(2) || '0.00' }}</view>
      <view class="text">支付成功</view>
      <view class="desc">订单支付成功，已通知药房尽快发出，请耐心等待~</view>
      <view class="info">
        <view class="tip">
          <text class="label">订单编号：</text>
          <text class="value">{{ orderDetail?.orderNo }}</text>
        </view>
        <view class="tip">
          <text class="label">下单时间：</text>
          <text class="value">{{ orderDetail?.createTime }}</text>
        </view>
        <view class="tip">
          <text class="label">支付时间：</text>
          <text class="value">{{ orderDetail?.payTime }}</text>
        </view>‘

        “
      </view>
    </view>

    <view class="buttons">
      <button class="uni-button" @tap="handleViewOrder">查看订单</button>
      <button class="uni-button plain" @tap="handleBackRoom">返回诊室</button>
    </view>
  </view>
</template>


<style lang="scss">
.pay-result {
  padding: 30rpx;
  min-height: 100vh;
  background-color: #f6f6f6;

  .success {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 60rpx 0;
    margin-top: 50rpx;

    .price {
      font-size: 60rpx;
      color: #16c2a3;
      margin-bottom: 20rpx;
    }

    .text {
      font-size: 36rpx;
      color: #121826;
      margin-bottom: 20rpx;
    }

    .desc {
      font-size: 26rpx;
      color: #848484;
    }
    .info {
      width: 100%;
      padding: 20rpx 40rpx 0;
      font-size: 26rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
    }

    .tip {
      width: 100%;
      padding: 20rpx 40rpx 0;
      font-size: 26rpx;

      .label {
        color: #848484;
      }

      .value {
        color: #121826;
        margin-left: 10rpx;
      }
    }
  }

  .buttons {
    margin-top: 60rpx;
    display: flex;
    justify-content: center;
    gap: 20rpx;

    .uni-button {
      flex: none;
      width: 280rpx;
      height: 80rpx;
      border-radius: 40rpx;
      font-size: 30rpx;
      line-height: 80rpx;



      &.plain {
        background-color: #fff;
        color: #16c2a3;
        border: 1rpx solid #16c2a3;
      }
    }
  }
}
</style>